<template>
  <div>
    <div class="search">
      <el-row :gutter="20" class="searchBar">
        <el-col :span="9"
          ><div class="grid-content type">
            姓名：<el-input size="small" maxlength="10" v-model="searchuser.fullName"></el-input></div
        ></el-col>
        <el-col :span="9"
          ><div class="grid-content bg-purple">
            角色：
            <el-select v-model="searchuser.roleId" placeholder="请选择" size="small">
              <el-option v-for="item in option" :key="item.id" :label="item.roleName" :value="item.id"> </el-option>
            </el-select></div
        ></el-col>
        <el-col :span="2"
          ><div class="grid-content bg-purple">
            <el-button type="primary" size="small" @click="search">搜索</el-button>
          </div></el-col
        >
      </el-row>
    </div>
    <div class="add">
      <el-button type="primary" @click="add" size="small" round>新增 +</el-button>
    </div>
    <div class="form">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="fullName" label="姓名" align="center"> </el-table-column>
        <el-table-column prop="phone" label="电话" align="center" width="100"> </el-table-column>
        <el-table-column prop="roleName" label="角色" align="center"> </el-table-column>
        <el-table-column prop="account" label="账号" align="center" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="password" label="密码" align="center"> </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row, 1)" type="text" size="small" style="color: #f56e2a"
              >详情</el-button
            >
            <el-button @click="handleClick(scope.row, 2)" type="text" size="small" style="color: #0a7afe"
              >编辑</el-button
            >
            <el-button @click="handleClick(scope.row, 3)" type="text" size="small" style="color: #f90505"
              >删除</el-button
            >
            <el-button @click="handleClick(scope.row, 4)" type="text" size="small" style="color: #0a7afe"
              >角色</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="角色选择" :visible.sync="dialogTableVisible" :close-on-click-modal="false">
      <el-form ref="identity" :model="identity[0]" label-width="120px">
        <el-form-item label="请选择:" prop="roleId">
          <el-select v-model="identity[0].roleId" placeholder="请选择">
            <el-option v-for="item in option" :key="item.id" :label="item.roleName" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请选择网格区域:" v-show="identity[0].roleId == 2 || identity[0].roleId == 6" prop="gridId">
          <el-select v-model="identity[0].gridId" placeholder="请选择">
            <el-option v-for="item in postion" :key="item.id" :label="item.gridName" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="Submit" style="margin-left: -25px">提交</el-button>
          <el-button type="primary" style="margin-left: 151px" @click="dialogTableVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-drawer :title="this.titledetails" :visible.sync="drawer" direction="rtl" :before-close="handleClose" size="55%">
      <DeTails :childmessage="postMessage" v-show="status == 1"></DeTails>
      <edit :childmessage="postMessage" :positionmesssage="postion" v-show="status == 2"></edit>
      <addperson :postuser="option" :positionmesssage="postion" v-show="status == 10"></addperson>
    </el-drawer>
    <div class="pagination">
      <el-pagination layout="prev, pager, next" :total="total * 10" @current-change="changepage"></el-pagination>
    </div>
  </div>
</template>

<script>
import edit from './edit/edit.vue'
import * as admin from '@/api/admin'
import DeTails from './details/DeTails'
import addperson from './addperson/addperson'
import superadmin from '@/api/superadmin'
export default {
  data() {
    return {
      total: '',
      identity: [
        {
          gridId: '',
          roleId: '',
          userId: '',
        },
      ],
      current: 1,
      limit: 10,
      user: '',
      dialogTableVisible: false,
      postion: [],
      postMessage: {},
      titledetails: '',
      status: 0,
      drawer: false,
      option: [],
      tableData: [],
      searchuser: {
        pageNo: '1',
        pageSize: '8',
        fullName: '',
        roleId: '',
      },
      postuserlist: {
        pageNo: 1,
        pageSize: 100,
        roleName: '',
      },
    }
  },
  created() {
    this.createdlist()
    this.getalluser()
    superadmin.patrol(this.current, this.limit).then(e => {
      this.postion = e.data.List.records
    })
  },
  components: {
    DeTails,
    edit,
    addperson,
  },
  methods: {
    getalluser() {
      admin
        .getalluser(this.postuserlist)
        .then(res => {
          if (res.code == 200) {
            this.option = res.data.records
          }
        })
        .catch(err => {
          this.$message({
            message: '获取角色列表信息失败，请重试',
            type: 'error',
          })
        })
    },
    createdlist() {
      admin
        .getuserlist(JSON.stringify(this.searchuser))
        .then(res => {
          this.total = res.data.totalPage
          this.tableData = res.data.records
        })
        .catch(err => {
          this.$message({
            message: res.err,
            type: 'error',
          })
        })
    },
    search() {
      admin.getuserlist(this.searchuser).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.records
          this.total = res.data.totalPage
        }
      })
    },
    changepage(val) {
      this.searchuser.pageNo = val
      admin
        .getuserlist(this.searchuser)
        .then(res => {
          this.total = res.data.totalPage
          this.tableData = res.data.records
        })
        .catch(err => {
          this.$message({
            message: '获取列表失败，请刷新后重试！',
            type: 'error',
          })
        })
    },
    Submit() {
      admin
        .setupuser(this.identity)
        .then(res => {
          if (res.code == 200) {
            this.$message({
              message: '修改成功！',
              type: 'success',
            })
            this.dialogTableVisible = false
            this.identity = [
              {
                gridId: '',
                roleId: '',
                userId: '',
              },
            ]
            this.createdlist()
          }
        })
        .catch(err => {
          this.$message({
            message: '网络错误，请刷新后重试',
            type: 'error',
          })
        })
    },
    add() {
      this.status = 10
      this.drawer = true
      this.titledetails = '人员新增'
    },
    handleClick(scope, event) {
      switch (event) {
        case 1:
          this.status = event
          this.titledetails = '人员详情'
          this.drawer = true
          this.postMessage = scope
          break
        case 2:
          this.status = event
          this.titledetails = '人员编辑'
          this.drawer = true
          this.postMessage = scope
          break
        case 3:
          this.$confirm('确认删除？')
            .then(_ => {
              admin
                .Del(scope.userId)
                .then(res => {
                  if (res.code == 200) {
                    this.$message({
                      message: '删除成功！',
                      type: 'success',
                    })
                    this.createdlist()
                  }
                })
                .catch(err => {
                  this.$message({
                    message: '发生错误,请重试',
                    type: 'error',
                  })
                })
            })
            .catch(_ => {
              this.$message({
                message: '已取消',
                type: 'info',
              })
            })

          break
        case 4:
          this.identity[0].userId = scope.userId
          this.dialogTableVisible = true
          break
        default:
          break
      }
    },
    handleClose(done) {
      done()
      this.createdlist()
    },
  },
}
</script>

<style lang="scss" scoped>
@import './usersearch.scss';
</style>
